<template>
  <el-dialog
    title="设备部署列表"
    :visible.sync="dialogVisible"
    width="80%"
    :close-on-click-modal="false"
    class="custom-dialog"
  >
    <u-page-config
      :filter-array="filterArray"
      v-model="filter"
      :actionBtn="[]"
      :getList="getList"
      :tableData="tableData"
      :tableColumn="tableColumn"
      :total="total"
      :loading="loading"
      :show-selection="false"
      :show-tool="false"
      @select="handleSelectDevice"
      style="max-height: 80vh;overflow: auto"
    >
      <template #deviceStatus="scope">
        <dict-tag
          :options="dict.type.device_status"
          :value="scope.row.deviceStatus"
        />
      </template>
    </u-page-config>
  </el-dialog>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import table from "@/mixin/uTable";
import {listManager} from "@/api/device/placeManager";
import permission from "@/store/modules/permission";

export default {
  name: "SelectDeviceDialog",
  mixins: [table],
  components: {UPageConfig},
  dicts: ['device_status'],
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(newValue) {
        return this.$emit('input', newValue)
      }
    },
  },
  data() {
    return {
      filterArray: [
        {label: "设备ID", key: "deviceId", type: "input"},
        {label: "设备部署名称", key: "deploymentName", placeholder: "请输入设备部署名称", type: "input"},
        {label: "设备状态", key: "deviceStatus", placeholder: "请选择设备状态", type: "select",
          options: []
        },
      ],
      tableColumn: [
        {label: "设备ID", prop: "deviceId"},
        {label: "部署名称", prop: "deploymentName"},
        {label: "设备型号", prop: "deviceName"},
        {label: "设备状态", prop: "deviceStatus", type: 'slot', slot: 'deviceStatus'},
        {label: "设备部署分组", prop: "groupId"},
        {
          label: "操作", type: "btn", attr: {width: 100}, btnArr: [
            {icon: "el-icon-thumb", text: "选择", emit: "select"}
          ],
        }
      ],
    }
  },

  methods: {
    handleSelectDevice(row){
      this.dialogVisible = false
      // 关闭设备列表弹窗
      this.$emit('select', row)
    },
    getList() {
      this.getInit(listManager, {})
    }
  },

  watch:{
    'dict.type.device_status': {
      handler(newValue) {
        this.filterArray[2].options = newValue
      },
      immediate: true
    }
  },

  created() {

  },
}
</script>

<style lang="scss" scoped>

</style>
